<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script language="JavaScript" src="layui/layui.all.js"></script>
    <script language="JavaScript"src="js/xm-select.js"></script>
    <script language="JavaScript"src="js/jquery.min.js"></script>
    <script language="JavaScript"src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>

    <style>
         .xm-select-demo, .xm-select-demo-alert {
             vertical-align: top;
             display: inline-block;
             width: 300px;
             margin-bottom: 10px;
         }
        .content{
            margin: 50px 0px 0px 50px;
        }
    </style>
</head>
<body>
<div class="content">
    <span>赋值与取值</span>
    <div id="demo1" class="xm-select-demo"></div>
    <br/><br/>
    <button class="btn" id="demo1-test1">赋值张三</button>
    <button class="btn" id="demo1-test2">赋值张三(value方式)</button>
    <button class="btn" id="demo1-test3">追加赋值李四</button>
    <br/><br/>
    <button class="btn" id="demo1-test4">清除李四</button>
    <button class="btn" id="demo1-test5">清空</button>
    <pre id="demo1-result"></pre>
</div>
<script>

    window.addEventListener('click', () => {
        console.log("点击");
    })

    var demo1 = xmSelect.render({
        el: '#demo1',
        data: [
           /* {name: '张三', value: 1},*/
            {name: '李四', value: 2},
            {name: '王五', value: 3},
        ]
    })

    document.getElementById('demo1-test1').onclick = function(){
        demo1.setValue([
            {name: '张三', value: 1},
        ])
    };

    document.getElementById('demo1-test2').onclick = function(){
        demo1.setValue([ 1 ])
    };

    document.getElementById('demo1-test3').onclick = function(){
        demo1.append([ 2 ]);
    };

    document.getElementById('demo1-test4').onclick = function(){
        demo1.delete([ 2 ])
    };

    document.getElementById('demo1-test5').onclick = function(){
        demo1.setValue([ ])
    };


</script>



</body>
</html>